<!DOCTYPE html>
<html lang="en">
<head>
    {{ template "header" .}}
    <title>{{ .title}}</title>
    <style>
        a {
            color: #FFFFFF;
            text-decoration-line: none;
        }
        a:hover{
            text-decoration-line: underline;
        }

    </style>
</head>
<body>
<div id="app">
    <el-container>
        {{ template "navbar" .}}
        <el-row :gutter="20" style="margin-top: 60px">
            <el-col :span="16" :offset="4">
                {{ template "proclaim" .}}
                <el-container>
                    {{ template "aside" .}}
                    <el-container>
                        {{ template "blog_list" .}}
                        {{ template "pagination" .}}
                    </el-container>
                </el-container>

            </el-col>
        </el-row>

    </el-container>

</div>

{{ template "js" .}}

<script>
    var hotBlogs = {{.HotBlogs}}
    var Main = new Vue({
        el: "#app",
        data: {
            fit:'contain',
            input:'',
            select:'',
            categoryList: [],
            pagesize: 3,
            page: 1,
            loading: true,
            total:0,
            currentDate: '2021-06-01',
            blogs: hotBlogs,
            author: {
                name: "Liang Chao",
            },
            loading: false,
            lists: hotBlogs

        },
        delimiters:['${', '}'],
        functions: {
            handleSizeChange(val) {
                this.pagesize = val
                this.page = 1
                this.queryBlogsByKeywords(this.input, this.select)

            },
            handleCurrentChange(val) {
                this.page = val
                this.queryBlogsByKeywords(this.input, this.select)
            },
            queryBlogsByKeywords(keywords, method){
                let blogList = []
                let total = 0
                this.input = keywords
                this.select = method === '' ? '1':method
                $.ajax({
                    url: `/blogo/blog/query/${this.page}/${this.pagesize}?input=${this.input}&method=${this.select}`,
                    type: "get",
                    async: false,
                    dataType: "json",
                    success: function (res) {
                        if(res != null && res.code === 200){
                            blogList = res.data.blogs
                            total = res.data.total
                        }
                    }
                })
                this.blogs = blogList
                this.total = total
            },

        }

    })
</script>

</body>
</html>